<template>
	<div class="content">
		<local v-show='false'></local>
		<van-sticky >
			<navHeader></navHeader>
		</van-sticky>
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(image, index) in images" @click='toCateList(index)' :key="index">
				<img :src="image" />
			</van-swipe-item>
		</van-swipe>
		
		<van-grid :border="false" :column-num="4">
			<van-grid-item v-for='(item,index) in cateList' @click='toCateList(index)' :key='index'>
			<i class="iconfont" :class="item.pic" ></i>
			<span>{{item.name}}</span>
			</van-grid-item>
		</van-grid>
		
		<van-sticky >
			<van-tabs title-active-color="black" background="rgb(246, 247, 246)" @change='changeNav' color="#39bc30" swipe-threshold="5" v-model="active">
				<van-tab title="家用车" />
				<van-tab title="送礼车" />
				<van-tab title="婚车" />
				<van-tab title="装逼" />
				<van-tab title="泡妞" />
			</van-tabs>
		</van-sticky>

		<goods-list :list="productlist"></goods-list>
		<div class="zero-wrap"/>

		
	</div>
</template>

<script>
	import {mapGetters} from "vuex"

	import GoodsList from "../components/goods-list.vue"
	import local from './location.vue';
	import navHeader from '../components/nav.vue'
	export default {
		name: 'Home',
		components: {
			
			GoodsList,local,navHeader
		},
		data() {
			return {
				
				cateList:[],
				value: '',
				searchValue:'',
				location:'郑州',
				active: 0,
				stickyHeight: '54',
				images: [
					
				],
				
				productlist: []
			}
		},
		computed:{
			...mapGetters(['getLocation']),
		},
		created() {
			
			this.getBanner();
			this.getCate();
			
			this.productlist = this.$api.goodsData[0];
		},
		mounted() {
		
		},
		methods:{
			toCateList(index){
				this.$router.push({path:'/category',query:{id:index}})
			},
			changeNav(name){
				this.productlist = this.$api.goodsData[name>=3?3:name];
			},
			search(){
				this.$router.push({path:'/search',query:{key:this.searchValue}});
			},
			getBanner(){
				
					this.images = this.$api.bannerList;
				
			},
			getCate(){
				
					this.cateList =  this.$api.categoryList;
			
			}
		}

	}
</script>

<style scoped="scoped">
	.iconfont{
		color:#07C160;
		font-size:2rem;
	}
	
	.content{
		background: #F3F3F3;
	}
	
	img {
		width: 100%;
		height: 150px;
	}
	.zero-wrap{
		height: 50px;
	}
</style>
